670598 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

 ☆ Sanctuary ☆  Smile for you

CURSOR属性

 || フリーページ一覧表へ戻る || フォントリストへ || ◇◇◇◇◇ ||
カーソル属性の使い方を覚えよう!!
カーソルの形状は通常は左上向きの矢印になってますが、
cursor 属性の指定でカーソルの形状を変えることができます。
カーソルの形状名と形状は次の表のようになっています。
形状名 形 状
default標準(矢印型)
crosshair十字型
pointerリンク部分の上にある時の形状
move移動可能であることを示す形状
textテキスト選択用の形状
wait処理中であることを示す形状
helpヘルプを示す形状
n-resizeリサイズ可能:上方向
s-resizeリサイズ可能:下方向
w-resizeリサイズ可能:左方向
e-resizeリサイズ可能:右方向
ne-resizeリサイズ可能:右上方向
nw-resizeリサイズ可能:左上方向
se-resizeリサイズ可能:右下方向
sw-resizeリサイズ可能:左下方向

ここでは、テーブルの各セル内にカーソルを入れたときにカーソルの形状を変えて見ることにしましょう!

<table bgcolor="white" border="5" cellpadding="20" cellspacing="5" width="600" style="line-height:150%;">
<tr><td width="50%" style="cursor:default;">標準(矢印型)</td>
<td width="50%" style="cursor:crosshair;">十字型</td></tr>
<tr><td style="cursor:pointer;">リンク部分の上にある時の形状</td>
<td style="cursor:move;">移動可能であることを示す形状</td></tr>
<tr><td style="cursor:text;">テキスト選択用の形状</td>
<td style="cursor:wait;">処理中であることを示す形状</td></tr>
<tr><td style="cursor:help;">ヘルプを示す形状</td> <td> </td>
<tr><td bgcolor="palegreen" style="cursor:n-resize;">リサイズ可能:上方向</td>
<td bgcolor="palegreen" style="cursor:s-resize;">リサイズ可能:下方向</td></tr>
<tr><td bgcolor="plum" style="cursor:w-resize;">リサイズ可能:左方向</td>
<td bgcolor="plum" style="cursor:e-resize;">リサイズ可能:右方向</td></tr>
<tr><td bgcolor="khaki" style="cursor:ne-resize;">リサイズ可能:右上方向</td>
<td bgcolor="paleturquoise" style="cursor:nw-resize;">リサイズ可能:左上方向</td></tr>
<tr><td bgcolor="paleturquoise" style="cursor:se-resize;">リサイズ可能:右下方向</td>
<td bgcolor="khaki" style="cursor:sw-resize;">リサイズ可能:左下方向</td></tr>
</table>

こんな感じになります。↓↓ カーソルを各セル内に入れてみてください。
同じ色のところは見かけ上同じカーソル同士です。
標準(矢印型) 十字型
リンク部分の上にある時の形状 移動可能であることを示す形状
テキスト選択用の形状 処理中であることを示す形状
ヘルプを示す形状  
リサイズ可能:上方向 リサイズ可能:下方向
リサイズ可能:左方向 リサイズ可能:右方向
リサイズ可能:右上方向 リサイズ可能:左上方向
リサイズ可能:右下方向 リサイズ可能:左下方向

いかがでしたでしょうか?
カーソルの形状は簡単に変えられることがわかったかと思います。
お試しになってみてください。
それでは、く( ̄Д ̄)ノガンバローーー♪


cursor属性


© Rakuten Group, Inc.